var UpdateFormPopover = function () {
  var template = /* html */ `
    <div class="update-form-popover" style="cursor:pointer;" v-popover:formPopover>
      <div class="value-div">
        <template v-if="formType!=='date'">
          <div>{{value}}</div>
        </template>
      </div>

      <el-popover v-model="showPopover" ref="formPopover" :placement="placement" trigger="click" :title="title" 
        @show="resetValue">
        <div>
          <template v-if="formType==='text'">
            <el-input style="width:200px;" v-model="inputValue" size="medium" :placeholder="placeholder"></el-input>
          </template>
          <template v-else-if="formType==='input-number'">
            <el-input-number style="width:200px;" v-model="inputValue" size="medium" :placeholder="placeholder" :min="min" :max="max"
              :step="step" :precision="precision" :controls="controls" controls-position="right" :is-decimal-zero="isDecimalZero">
            </el-input-number>
          </template>
        </div>
        <div style="margin-top:10px;text-align:center">
          <el-button type="primary" size="medium" @click="save">修改</el-button>
        </div> 
      </el-popover>
    </div>
  `;

  return {
    props: {
      value: {
        required: true
      },
      formType: {
        type: String,
        default: 'text'
      },
      placement: {
        type: String,
        default: 'right'
      },
      title: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: function () {
          var title = this.title;
          var placeholder;
          var formType = this.formType;
          if (['date', 'select'].indexOf(formType) !== -1) {
            placeholder = '请选择' + title;
          } else {
            placeholder = '请输入' + title;
          }
          return placeholder;
        }
      },
      min: Number,
      max: Number,
      step: {
        type: Number,
        default: 1
      },
      precision: Number,
      controls: {
        type: Boolean,
        default: true
      },
      isDecimalZero: {
        type: Boolean,
        default: true
      },
      checkValid: Function
    },

    data: function () {
      return {
        inputValue: this.value,
        showPopover: false
      };
    },

    methods: {
      resetValue: function () {
        this.inputValue = this.value;
      },

      save: function () {
        var checkValid = this.checkValid;
        var inputValue = this.inputValue;
        if (checkValid !== undefined && !checkValid(inputValue)) {
          return;
        }
        this.showPopover = false;
        this.$emit('save', inputValue);
      }
    },

    template: template
  };
}();